{% extends 'layout/basic.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        ul {
            list-style: none;
            padding-left: 0;
        }
    </style>

{% endblock %}
{% block title %}
    注册页面
{% endblock %}
{% block content %}
    <div class="container ">
        <div class="panel panel-default account">
            <div class="panel-heading">
                <h3 class="panel-title title" style="text-align: center">注 册</h3>
            </div>
            <div class="panel-body">
                <form novalidate method="post" id="RegForm">
                    {% csrf_token %}
                    {% for field in form %}
                        {% if field.name == 'code' %}
                            <div class="form-group clearfix">
                                <div><label for="{{ field.id_for_label }}">{{ field.label }}</label></div>
                                <div class="col-md-6" style="padding-left: 0;position: relative;">
                                    {{ field }}
                                    <span style="color: red;position: absolute;"
                                          class="errmsg">{{ field.errors.0 }}</span>
                                </div>
                                <div class="col-md-6">
                                    <input type="button" id="getcode" value="获取验证码" class="btn btn-success">
                                </div>
                            </div>
                        {% else %}
                            <div class="form-group" style="position: relative">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span style="color: red;position: absolute;" class="errmsg">{{ field.errors.0 }}</span>
                            </div>
                        {% endif %}

                    {% endfor %}
                    <div class="form-group">
                        <!-- type改成button的目的是希望提交时，页面不会刷新，不会影响倒计时效果 -->
                        <input type="button" class="btn btn-primary" id="RegBtn" value="注 册">
                    </div>

                </form>


            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            Register();
            RegForm();
        })

        // 手机号码格式正则校验
        function checkPhone(arg) {
            let re = /^1[3-9]\d{9}$/;
            let result = re.test(arg);
            if (result) {
                return true;
            } else {
                return false;
            }
        }

        // 清空电话号码的错误信息
        function error_empty() {
            $('.errmsg').empty();
        }


        // 获取短信验证码校验及请求发送
        function Register() {

            $('#getcode').click(function () {
                let phone = $('#id_phone').val();
                //let res = checkPhone(phone);改写后不需要前端进行号码格式校验
                //let res = true;  // 为了使ajax发出，手动将res置为true，保留了原有的逻辑没有删除，后面可以作为参考


                this.disabled = true;
                //$('#id_phone').attr('disabled', true);
                error_empty();
                console.log(123)
                $.ajax({
                    url: '/send/sms/',
                    type: 'GET',
                    data: {
                        'type': 'register',
                        'phone': phone,
                    },
                    dataType: 'JSON',
                    success: function (result) {
                        if (!result.status) {
                            console.log(result)
                            $.each(result['errors'], function (k, v) {
                                $('#id_' + k).next().text(v[0])
                            })
                            $('#getcode').attr('disabled', false);
                            //$('#id_phone').attr('disabled', false);

                        } else {
                            console.log(result)
                            let s = 60;
                            $(this).val('请等待' + s + '秒');
                            var timer = setInterval(count, 1000);

                            // 倒计时函数
                            function count() {
                                if (s > 1) {
                                    s--;
                                    $('#getcode').val('请等待' + s + '秒');
                                    console.log(s)
                                } else {
                                    clearInterval(timer);
                                    $('#getcode').attr('disabled', false).val('获取验证码');
                                    //$('#id_phone').attr('disabled', false);
                                }

                            }
                        }
                    }
                })


            })
        }

        // 表单数据提交
        function RegForm() {
            $('#RegBtn').click(function () {
                error_empty();
                $.ajax({
                    url:'/register/',
                    type: 'POST',
                    data: $('#RegForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            alert('恭喜注册成功!')
                            location.href = res.data;
                        }else {
                            $.each(res.errors,function (k,v) {
                                $('#id_'+k).next().text(v[0])
                            })
                        }
                    }
                })
            })
        }

    </script>
{% endblock %}